<template>
	<view class="search">
		<!-- 顶部样式 -->
			<mucishead title="搜索" :icon="true" :blackicon="true"></mucishead>
			<!--  -->
			<view class="container">
				<scroll-view scroll-y="true" >
					
					<!-- 搜索框 -->
					<view class="search-seach">
						<text class="iconfont icon-search"></text>
						<input type="text" placeholder="搜索歌曲"  v-model="searchWord" @confirm="handleTosearch(searchWord)" @input="handleToSuggest"/>
						<text v-show="searchType !=1" class="iconfont icon-close" @tap="handleToClose()"></text>
					</view>
					
					<block v-if="searchType == 1">
					<!-- 历史记录 -->
					<view class="search-history">
						<view class="search-history-head">
							<text>历史记录</text>
							<text class="iconfont icon-delete" @tap="handleDlete"></text>
						</view>
						<view class="search-history-list">
							<view v-for="(item,index) in searchHistory " :key ="index" @tap="handleToword(item)">{{item}}</view>
							
						</view>
					</view>
					
					<!-- 热搜榜单 -->
					<view class="search-hot">
							<view class="search-hot-head">
								热搜榜
							</view>
							
							<!-- <view class="search-hot-item">
								<view class="search-hot-top">1</view>
								<view class="search-hot-word">
									<view class="">
										少年<image src="../../static/images/dujia.png" mode="aspectFill"></image>
									</view>
									<view class="">少年这个词实在是太美妙了</view>
								</view>
								<text class="search-hot-count">123456</text>
							</view> -->
							<view class="search-hot-item" v-for="(item,index) in searchHot" :key="index" @tap="handleToword(item.searchWord)">
								<view class="search-hot-top">{{index + 1}}</view>
								<view class="search-hot-word">
									<view class="">
										{{item.searchWord}}<image :src="item.iconUrl" mode="aspectFill"></image>
									</view>
									<view class="">{{item.content}}</view>
									</view>
								<text class="search-hot-count">{{item.score}}</text>
							</view>		
						</view>
					</block>
					
					<!-- 搜索结果 -->
					<block v-else-if="searchType == 2">
						<view class="search-result">
							<!-- <view class="search-result-item">
								<view class="search-result-word">
									<view>你好</view>
									<view>立马——你好明天</view>
								</view>
								<text class="iconfont icon-timeout"></text>
							</view> -->
							<view class="search-result-item" v-for="(item,index)  in searchList" :key="index" @tap="handleTodetail(item.id)">
								<view class="search-result-word">
									<view>{{item.name}}</view>
									<view>{{item.artists[0].name}} — {{item.album.name}}</view>
								</view>
								<text class="iconfont icon-timeout"></text>
							</view>
						</view>
					</block>
					
					<!-- 搜索提示框 -->
					<block v-else-if="searchType == 3">
						<view class="search-suggest">
							<view class="search-suggest-title">
								搜索“{{searchWord}}”
							</view>
							<!-- <view class="search-suggest-item">
								<text class="iconfont icon-search"></text>少年-明
							</view> -->
							<view class="search-suggest-item" v-for="(item,index) in searchSuggest" :key="index" @tap="handleToword(item.keyword)">
								<text class="iconfont icon-search"></text>{{item.keyword}}
							</view>
						</view>
					</block>
				</scroll-view>
			</view>
	</view>
</template>

<script>
	// 导入公共头部文件
	import mucishead from '../../components/mucishead/mucishead.vue'
	// 导入icon样式表
	import '@/common/iconfont.css'
	//导入接口文件
	import {searchHot,searchWord,searchSuggest} from '../../common/api.js'
	export default {
		data() {
			return {
				searchHot:[],
				searchWord:'',
				searchHistory:[],
				searchType:1,
				searchList:[],
				searchSuggest:[]
			}
		},
		onLoad() {
			// 加载页面的时候 渲染热词数组
			searchHot().then((res) =>{
				if(res[1].data.code == '200'){
					this.searchHot = res[1].data.data;
				}
			});
			
			//获取本地存储的历史记录 并且渲染到页面
			uni.getStorage({
			    key: 'searchHistory',
			    success: (res)=> {
			        this.searchHistory = res.data;
			    }
			});
		},
		// 组件注册
		components:{
			mucishead
		},
		methods: {
			//将热词传递搜索框
			handleToword(word){
				this.searchWord = word;
				// 将搜索提示框中的内容 渲染到搜索框中并且搜索；
				this.handleTosearch(word);
			},
			// 搜索历史
			handleTosearch(word){
				this.searchHistory.unshift(word); 
				this.searchHistory = [...new Set(this.searchHistory)];
				if(this.searchHistory.length > 10){
					this.searchHistory.length = 10;
				}
				uni.setStorage({
					key:'searchHistory',
					data:this.searchHistory
				});
				this.getSearchList(word)
			},
			handleDlete(){
				uni.removeStorage({
				    key: 'searchHistory',
				    success:  (res) =>{
				        this.searchHistory = []
				    }
				});
			},
			getSearchList(word){
				searchWord(word).then((res)=>{
					if(res[1].data.code == '200'){
						this.searchList = res[1].data.result.songs;
						this.searchType = 2;
					}
				})
			},
			// 点击X 的时候 清除搜索词
			handleToClose(){
				this.searchWord = '';
				// 回到热词界面
				this.searchType = 1;
			},
			handleTodetail(songId){
				console.log(songId)
				uni.navigateTo({
					url:'/pages/detail/detail?songId='+songId
				});
			},
			
			// 在搜索框中边输入边触发下拉提示框
			handleToSuggest(event){
				// 获取当前输入的值
				let value = event.detail.value;
				if(!value){
					this.searchType = 1;
					return;
				}
				 console.log(value)
				searchSuggest(value).then((res)=>{
					if(res[1].data.code=='200'){
						this.searchSuggest = res[1].data.result.allMatch;
						this.searchType = 3;
					}
				})
			}
			
		},
		
	}
</script>

<style scoped>
	.search-seach{
		display: flex;
		align-items: center;
		height: 70rpx;
		margin: 70rpx 30rpx 50rpx 30rpx;
		background: #f7f7f7;
		border-radius: 50rpx;
	}
	.search-seach input{
		font-size: 26rpx;
		flex: 1;
	}
	.search-seach text{
		font-size: 26px;
		margin-right: 26rpx;
		margin-left: 26rpx;
	}
	.search-history{
		margin: 0rpx 30rpx 50rpx 30rpx;
		font-size:26rpx;
	}
	.search-history-head{
		display: flex;
		justify-content: space-between;
		font-size: 26rpx;	
		margin-bottom: 36rpx;
		
	}
	.search-history-list{
		display: flex;
		flex-wrap: wrap;
		
	}
	.search-history-list view{
		padding: 16rpx 28rpx;
		border-radius:40rpx;
		margin-right: 30rpx;
		margin-bottom: 30rpx;
		background: #F7F7F7;
	}
	.search-hot{
		margin: 0 30rpx;
		font-size:26rpx;
	}
	.search-hot-head{
		margin-bottom: 36rpx;
	}
	.search-hot-item{
		display: flex;
		align-items: center;
		margin-bottom: 58rpx;
	}
	.search-hot-top{
		color: #fb2222;
		width: 60rpx;
		margin-left: 8rpx;
	}
	.search-hot-word{
		flex: 1;
	}
	.search-hot-word view:nth-child(1){
		font-size: 30rpx;
		color: black;
	}
	.search-hot-word view:nth-child(2){
		font-size: 24rpx;
		color: #878787;
	}
	.search-hot-word image{
		width: 48rpx;
		height: 22rpx;
	}
	.search-hot-count{
	    color: #878787;
	}
	
	.search-result{
		border-top:2rpx #e4e4e4  solid;
		padding: 30rpx;
	}
	.search-result-item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom:30rpx ;
		margin-bottom: 30rpx;
		border-bottom:2rpx #e4e4e4  solid;
	}
	.search-result-word{}
	.search-result-word view:nth-child(1){
		font-size: 28rpx;
		color: #235790;
		margin-bottom: 12rpx;
	}
	.search-result-word view:nth-child(2){
		font-size: 22rpx;
		color: #898989;
	}
	.search-result-item text{
		font-size: 50rpx;
	}
	.search-suggest{
		border-top:2rpx #e4e4e4  solid;
		padding: 30rpx;
		font-size:26rpx;
		}
	.search-suggest-title{
		color: #4574a5;
		margin-bottom: 74rpx;
	}
	.search-suggest-item{
		color: #5d5d5d;
		margin-bottom: 74rpx;
	}
	.search-suggest-item text{
		color: #bdbdbd;
		margin-right: 28rpx;
		position: relative;
		top:6rpx;
	}
</style>
